<template>
<view style="position:relative;">
    <view class="body">
        <scroll-view class="folders" :scroll-y="true">           
            <radio-group value disabled="false" checked="false" color @change="chouseCollect">
                <label v-for="(item, index) in folderList" :key="index" class="row row-between">
                    <view class="folder border row-between">
                        <view class="folder-info row">
                            <image src="http://imgbdb3.bendibao.com/whbdb/202010/20/20201020134227_73259.png" class="info-icon"></image>
                            <view class="info-detail">
                                <view class="folder-name">{{item.collect}}</view>
                            </view>
                        </view>
                    </view>
                    <radio :value="item.id"></radio>
                </label>
            </radio-group>
            <navigator class="folder border row-between" :url="'/pages/mine/collect/folder/folder?type=new&apitype=' + (from_type ? 'move' : 'add') + '&valueid=' + valueid + '&value=' + value" open-type="redirect">
                <view class="folder-info row">
                    <image src="http://imgbdb3.bendibao.com/whbdb/202010/14/20201014151929_59952.png" class="info-icon"></image>
                    <view class="info-detail">
                        <view class="folder-name">创建收藏夹</view>
                    </view>
                </view>
            </navigator>
        </scroll-view>
        <view class="new-folder"></view>
    </view>
    <view :class="'cancel ' + (type_id ? 'bind' : '')" @tap="confirm">收藏</view>
</view>
</template>

<script>
const app = getApp();
import util from "../../utils/util";
import tools from "../../utils/tools";

export default {
  data() {
    return {
      showCot: false,
      folderList: [],
      id: "",
      index: "",
      ids: "",
      type: "",
      value: "",
      valueid: "",
      from_type: false,
      type_id: false,
      isCollect: false
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    // 监听页面加载的生命周期函数
    util.getUrl(app.globalData.url);
    this.setData({
      valueid: options.ids,
      value: decodeURIComponent(options.value),
      ids: options.ids,
      type: options.type,
      from_type: options.from_type
    });
  },

  onShow() {
    this.getUserFilders();
  },

  onShareAppMessage(e) {},

  methods: {
    // 获取用户全部收藏夹
    getUserFilders() {
      util.request("user.php", {
        action: "collect",
        option: "collect_list",
        user_id: uni.getStorageSync("user_id"),
        openid: uni.getStorageSync("openid")
      }, "POST").then(res => {
        if (res.data.message == "success") {
          this.setData({
            folderList: res.data.data
          });
        }
      });
    },

    confirm() {
      this.type == "move" ? this.move() : this.addCollect(this.valueid, this.type_id);
    },

    chouseCollect(e) {
      let type_id = e.detail.value;
      this.setData({
        type_id
      });
    },

    // 添加收藏接口
    addCollect(id, type_id) {
      let data = {
        action: "collect",
        option: "add",
        valueid: id,
        citycode: uni.getStorageSync("citycode"),
        user_id: uni.getStorageSync("user_id"),
        type_id,
        openid: uni.getStorageSync("openid"),
        path: "article",
        value: this.value
      };
      util.request('user.php', data, 'POST').then(res => {
        if (res.data.state == 1) {
          uni.showToast({
            title: res.data.message
          });
          let pages = getCurrentPages(); //当前页面

          let prevPage = pages[pages.length - 2]; //上一页面

          prevPage.setData({
            //直接给上移页面赋值
            isCollect: true
          });
          uni.navigateBack({
            delta: 1
          });
        }
      });
    },

    move() {
      if (uni.getStorageSync("openid")) {
        tools.moveCollect(this.type_id, this.valueid).then(res => uni.navigateBack());
      } else {
        util.getUrl(app.globalData.url).then(res => {
          // 登录
          uni.login({
            success: res => {
              // 发送 res.code 到后台换取 openId, sessionKey, unionId
              let loginData = {
                action: "bdlogin",
                // appid: accountInfo.appId,
                appid: "15049213",
                code: res.code
              };
              util.request('user.php', loginData, 'POST').then(res => {
                uni.setStorageSync("session_key", res.data.data.session_key);
                uni.setStorageSync("openid", res.data.data.openid);
                app.globalData.session_key = res.data.data.session_key;
                tools.moveCollect(this.type_id, this.valueid).then(res => uni.navigateBack());
              });
            }
          });
        });
      }
    }

  }
};
</script>
<style>
button {
    margin: 0;
    padding: 0;
    background-color: transparent;
    line-height: normal;
}

.body {
    padding: 0 40rpx;
    padding-top: 38rpx;
    font-size: 30rpx;
    color: #141414;
}
.folders{
    height: 1000rpx;
}
.info-icon {
    width: 150rpx;
    height: 118rpx;
    margin-right: 34rpx;
}

.control-icon {
    width: 5rpx;
    height: 32rpx;
    padding: 20rpx;
}

.folder-num {
    margin-top: 4rpx;
    font-size: 24rpx;
    color: #9F9F9F;
}

.control {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 554rpx;
    border-radius: 74rpx 74rpx 0 0;
    box-shadow: 0 0 12rpx 0 rgba(0, 0, 0, 0.16);
    background-color: rgb(246, 246, 246);
    box-sizing: border-box;
    z-index: 2;
}

.control .folder-info {
    padding-bottom: 37rpx;
    margin-bottom: 37rpx;
    border-bottom: 2rpx solid #EBEBEB;
}

.cot-list {
    display: flex;
    align-items: center;
}

.cot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 54rpx;
}

.cot-icon {
    width: 94rpx;
    height: 94rpx;
    margin-bottom: 10rpx;
}

.cot-name {
    font-size: 24rpx;
    color: #141414;
    font-weight: 500;
}

.cancel {
    position: fixed;
    bottom: 60rpx;
    width: 90%;
    margin-left: 5%;
    height: 80rpx;
    line-height: 80rpx;
    border: 2rpx solid #797979;
    text-align: center;
    border-radius: 10rpx;
}

.black {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100vh;
    background-color: #000000;
    opacity: .38;
}

label {
    margin-bottom: 26rpx;
}

.bind {
    background-color: #FF6600;
    color: #ffffff;
    border: 0;
}
</style>